<template>
  <div class="flex-column">
    <div class="flex justify-between flex-row-reverse">
      <div class="text-right flex justify-end flex-wrap align-center">
        <!-- 区域选择 -->
        <region-cascader
          style="width: 300px"
          class="mb-10"
          :multiple="true"
          data-name="onlyRegionTree"
          placeholder="SELECT_REGION"
          @change="regionChange"
        />
        <el-select
          v-model="queryData.facilityType"
          clearable
          style="width: 200px"
          class="ml-10 mb-10"
          :placeholder="$t('PLEASE_SELECT') + $t('FACILITY_TYPE')"
        >
          <el-option
            v-for="item in dicFacilityTypeList"
            :key="item.code"
            :value="item.code"
            :label="item.name"
          />
        </el-select>
        <el-input
          v-model.trim="queryData.keyword"
          style="width: 200px"
          class="ml-10 mb-10"
          maxlength="32"
          clearable
          :placeholder="$t('FACILITY_NAME') + '/' + $t('RESOURCE_CODE')"
          @keyup.enter.native="$debounce(search)"
        />
        <el-button type="primary" class="ml-10 mb-10" @click="$debounce(search)">
          {{ $t('QUERY') }}
        </el-button>
      </div>
      <div class="flex mb-10">
        <el-button type="primary" icon="el-icon-plus" @click="add">{{
          $t('ADDE_FACILITY')
        }}</el-button>
        <el-button type="primary" icon="el-icon-upload2" @click="importVisible = true">{{
          $t('IMPORT')
        }}</el-button>
      </div>
    </div>

    <TableView
      :table-header="tableHeader"
      :table-data="tableData"
      :page-data="pageData"
      :operate-width="resetSize(140)"
      :options="{ configure: false }"
      @operate="operate"
      @pageChange="pageChange"
    />

    <!-- 新增、编辑组件 查看-->
    <edit :visible="editShow" :type="operateType" :row-data="rowData" @close="close" />

    <!--导入引导-->
    <ConfImportDialog
      :visible="importVisible"
      template-url="template/设施批量导入模板.xlsx"
      import-url="/import/importFacility"
      service-name="oen"
      import-tips="FACILITY_IMPORT_TIPS"
      @close="close"
    />
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import FacilityApi from '@/api/oen/FacilityApi'
  import { getParentsById } from '@/utils/common'
  import Edit from './Edit'
  import RegionCascader from '@/components/RegionCascader'
  import TableView from '@/components/TableView'
  import ConfImportDialog from '@/components/ConfImportDialog'
  let searchData = {} // 查询参数 只有点了查询有效
  export default {
    name: 'Facility',
    components: {
      RegionCascader,
      TableView,
      ConfImportDialog,
      Edit
    },
    data() {
      return {
        operateType: 'add',
        editShow: false,
        rowData: {},
        pageData: {
          page: 1,
          size: 20,
          total: 0
        },
        queryData: {
          regionIds: [],
          facilityType: '',
          keyword: ''
        },
        tableData: [],
        tableHeader: [
          {
            label: 'FACILITY_NAME',
            prop: 'facilityName',
            width: 200
          },
          {
            label: 'BELONGS_REGION_NAME',
            prop: 'regionIdText',
            width: 200
          },
          {
            label: 'RESOURCE_CODE',
            prop: 'resourceCode',
            width: 200
          },
          {
            label: 'FACILITY_TYPE',
            prop: 'facilityTypeText',
            width: 200
          },
          {
            label: 'LONGITUDE',
            prop: 'longitude',
            width: 100
          },
          {
            label: 'LATITUDE',
            prop: 'latitude',
            width: 100
          }
        ],
        importVisible: false,
        functionName: 'facility'
      }
    },
    provide() {
      return {
        functionName: 'facility',
        parentVM: this
      }
    },
    computed: {
      ...mapGetters(['customDictList', 'regionTree']),
      dicFacilityTypeList() {
        return this.customDictList.filter(i => i.type === 'FACILITY')
      },
      permission() {
        return this.$store.getters.getAuthData('conf:cable')
      }
    },
    activated() {
      this.loadData()
    },
    methods: {
      search() {
        this.pageData.page = 1
        this.queryData.keyword = this.queryData.keyword.trim()
        searchData = {
          ...this.queryData
        }
        this.loadData()
      },
      // 区域搜索条件改变
      regionChange(data) {
        this.queryData.regionIds = data.toString()
      },
      loadData() {
        const queryData = {
          ...this.pageData,
          ...searchData
        }
        console.log(queryData)
        FacilityApi.queryPage(queryData).then(res => {
          const list = res.list || []
          list.forEach(item => {
            const obj = this.dicFacilityTypeList.find(i => i.code === item.facilityType)
            item.regionIdText = this.getRegionName(item.regionId)
            item.facilityTypeText = (obj && obj.name) || ''
            item.btns = this.getBtns(item)
          })
          this.tableData = list
          this.pageData.total = res.total
        })
      },
      getBtns(row) {
        const btns = [
          {
            key: 'view',
            show: true,
            label: 'VIEW'
          },
          {
            key: 'mod',
            show: this.permission.mod,
            label: 'MOD'
          },
          {
            key: 'del',
            show: this.permission.del,
            label: 'DEL'
          }
        ]
        return btns.filter(i => i.show)
      },
      // 操作
      operate(data) {
        switch (data.type) {
        case 'view':
          this.operateType = 'view'
          this.rowData = data.data
          this.editShow = true
          break
        case 'mod':
          this.operateType = 'mod'
          this.rowData = data.data
          this.editShow = true
          break
        case 'del':
          this.del(data.data)
          break
        }
      },
      // 顶部添加
      add() {
        this.operateType = 'add'
        this.rowData = {}
        this.editShow = true
      },
      // 删除
      del(row) {
        this.$confirm(
          this.$t('CONFIRM_DELETION_PROMPT_TIP', {
            key: this.$t('FACILITY'),
            value: row.facilityName
          }),
          { type: 'warning' }
        )
          .then(() => {
            FacilityApi.del({ id: row.id, facilityName: row.facilityName, functionName: 'facility' }).then(res => {
              this.$message.success(this.$t('DELETE_SUCCESS'))
              this.loadData()
            })
          })
          .catch(() => {})
      },
      pageChange(data) {
        this.pageData = data
        this.loadData()
      },
      // 弹窗关闭
      close(load) {
        this.editShow = false
        this.importVisible = false
        if (load === 'load') {
          this.loadData()
        }
      },
      // 获取区域/站点/机房
      getRegionName(regionId) {
        const parents = getParentsById(this.regionTree, regionId, 'regionId') || []
        return parents
          .reverse()
          .map(i => i.regionName)
          .join('/')
      }
    }
  }
</script>
<style lang="scss" scoped></style>
